<template>
  <div class="video-generation-container">
    <a-card title="AI教学视频生成" class="section-card">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form layout="vertical">
            <a-form-item label="参考图片上传(可选)">
              <a-upload-dragger
                name="file"
                :multiple="false"
                :before-upload="beforeImageUpload"
                :custom-request="handleImageUpload"
                :show-upload-list="false"
                accept="image/*"
              >
                <p class="ant-upload-drag-icon">
                  <cloud-upload-outlined />
                </p>
                <p class="ant-upload-text">点击或拖拽图片到此区域上传</p>
                <p class="ant-upload-hint">上传参考图片有助于AI更好地理解视频风格需求</p>
              </a-upload-dragger>
              <div v-if="previewUrl" class="uploaded-preview">
                <img :src="previewUrl" alt="上传的参考图片" />
                <a-button type="link" size="small" @click="removeUploadedImage">
                  <delete-outlined /> 删除
                </a-button>
              </div>
            </a-form-item>

            <a-form-item label="视频描述">
              <a-textarea
                v-model:value="genParam.prompt"
                placeholder="请详细描述视频内容、教学目标和受众群体"
                :rows="4"
                show-count
                :maxlength="500"
              />
            </a-form-item>

            <a-form-item label="视频比例(默认16:9)">
              <a-select v-model:value="genParam.resolution" style="width: 100%">
                <a-select-option value="1920*1080">
                  <div class="ratio-option">
                    <span class="ratio-name">16:9 (宽屏)</span>
                    <span class="ratio-desc">标准视频、YouTube、在线课程</span>
                  </div>
                </a-select-option>
                <a-select-option value="1080*1920">
                  <div class="ratio-option">
                    <span class="ratio-name">9:16 (竖屏)</span>
                    <span class="ratio-desc">抖音、快手、短视频平台</span>
                  </div>
                </a-select-option>
                <a-select-option value="1440*1440">
                  <div class="ratio-option">
                    <span class="ratio-name">1:1 (正方形)</span>
                    <span class="ratio-desc">社交媒体、Instagram、朋友圈</span>
                  </div>
                </a-select-option>
                <a-select-option value="1632*1248">
                  <div class="ratio-option">
                    <span class="ratio-name">4:3 (标准)</span>
                    <span class="ratio-desc">传统电视、老式投影仪</span>
                  </div>
                </a-select-option>
                <a-select-option value="1248*1632">
                  <div class="ratio-option">
                    <span class="ratio-name">3:4(超宽屏)</span>
                    <span class="ratio-desc">电影、宣传片、宽屏演示</span>
                  </div>
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" :loading="generating" @click="generateVideo" block>
                生成教学视频
              </a-button>
            </a-form-item>
          </a-form>
        </a-col>

        <a-col :span="12">
          <div class="result-section">
            <h3>生成结果</h3>
            <div v-if="loading" class="loading-container">
              <a-spin size="large" />
              <p>正在生成教学视频，请稍候...</p>
              <div class="progress-info">
                <a-progress :percent="progress" :status="progressStatus" />
                <p class="progress-text">{{ progressText }}</p>
              </div>
            </div>

            <div v-else-if="generatedVideos && generatedVideos.trim()" class="videos-grid">
              <div class="video-item">
                <div class="video-preview">
                  <video
                    v-if="generatedVideos"
                    ref="videoRef"
                    controls
                    preload="metadata"
                    style="
                      width: 100%;
                      height: 400px;
                      object-fit: cover;
                      position: relative;
                      z-index: 10;
                    "
                    @loadedmetadata="handleVideoLoaded"
                    @error="handleVideoError"
                    @click="handleVideoClick"
                  >
                    <source :src="generatedVideos" type="video/mp4" />
                    您的浏览器不支持视频播放。
                  </video>
                  <div v-else class="video-placeholder">
                    <p>视频加载中...</p>
                  </div>
                  <div class="video-info">
                    <p>时长: 5s</p>
                  </div>
                </div>
                <div class="video-actions">
                  <a-space>
                    <a-button
                      type="primary"
                      size="small"
                      :loading="isDownloading"
                      @click="downloadVideo(generatedVideos)"
                      :disabled="!generatedVideos"
                    >
                      <template v-if="isDownloading"> 下载中 {{ downloadProgress }}% </template>
                      <template v-else> <download-outlined /> 下载 </template>
                    </a-button>
                  </a-space>
                </div>
              </div>
            </div>

            <div v-else class="empty-state">
              <a-empty description="暂无生成结果" />
              <p class="empty-tip">填写视频信息并点击生成按钮开始创建教学视频</p>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue'
import {
  CloudUploadOutlined,
  DeleteOutlined,
  DownloadOutlined,
  EyeOutlined,
  CloseOutlined,
} from '@ant-design/icons-vue'
import { saveAs } from 'file-saver'
import {
  deletePic,
  genImgUrlByUpload,
  genVideoByImg,
  genVideoByText,
} from '@/api/multiModalGenController'

// 表单数据
const previewUrl = ref('')
const uploadedImage = ref('')
const generating = ref(false)
const loading = ref(false)
const progress = ref(0)
const progressStatus = ref('active')
const progressText = ref('')

// 生成结果
const generatedVideos = ref<string>('')

// 下载相关
const downloadProgress = ref(0)
const isDownloading = ref(false)

// 视频相关引用
const videoRef = ref<HTMLVideoElement>()

// 视频加载完成处理
const handleVideoLoaded = () => {
  if (videoRef.value) {
    // 确保视频控制栏可见
    videoRef.value.controls = true
  }
}

// 视频点击处理
const handleVideoClick = (event: Event) => {
  event.stopPropagation()
  if (videoRef.value) {
    if (videoRef.value.paused) {
      videoRef.value.play().catch((error) => {
        console.error('Video play error:', error)
        message.error('视频播放失败，请重试')
      })
    } else {
      videoRef.value.pause()
    }
  }
}

// 视频加载错误处理
const handleVideoError = (event: Event) => {
  console.error('Video load error:', event)
  message.error('视频加载失败，请检查网络连接或视频链接')
}

// 图片上传相关
const beforeImageUpload = (file: File) => {
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    message.error('只能上传图片文件！')
    return false
  }

  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isLt10M) {
    message.error('图片大小不能超过10MB！')
    return false
  }

  return true
}

const handleImageUpload = async ({ file }: any) => {
  const res = await genImgUrlByUpload(file)
  try {
    if (res.data.data && res.data.code === 0) {
      message.success('参考图片上传成功')
      uploadedImage.value = res.data.data
    } else {
      message.error('文件上传失败,' + res.data.msg)
    }
  } catch (e) {
    message.error('文件上传失败,' + res.data.msg)
  }

  const reader = new FileReader()
  reader.onload = (e) => {
    previewUrl.value = e.target?.result as string
  }
  reader.readAsDataURL(file)
}

const removeUploadedImage = async () => {
  const res = await deletePic({
    imgUrl: uploadedImage.value,
  })
  if (res.data.data && res.data.code === 0) {
    uploadedImage.value = ''
    previewUrl.value = ''
    message.success('参考图片已删除')
  } else {
    message.error('参考图片删除失败，请重试')
  }
}

// 生成视频相关
const description = ref('')
const genParam = reactive<API.GenVideoRequest>({
  prompt: '',
  resolution: '1920*1080',
  imgUrl: '',
})
const generateVideo = async () => {
  description.value = genParam?.prompt ?? ''
  if (!description.value.trim()) {
    message.warning('请输入视频描述')
    return
  }

  generating.value = true
  loading.value = true
  progress.value = 0
  progressStatus.value = 'active'
  try {
    // 模拟生成过程
    const steps = [
      { percent: 10, text: '分析教学需求...' },
      { percent: 25, text: '生成视频脚本...' },
      { percent: 40, text: '创建视觉素材...' },
      { percent: 60, text: '合成音频内容...' },
      { percent: 80, text: '视频渲染处理...' },
      { percent: 95, text: '质量优化中...' },
      // { percent: 100, text: '生成完成！' }
    ]

    for (const step of steps) {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      progress.value = step.percent
      progressText.value = step.text
    }

    let res
    if (uploadedImage.value) {
      //图生视频
      genParam.imgUrl = uploadedImage.value
      genParam.resolution = '1080P'
      res = await genVideoByImg({
        ...genParam,
      })
      console.log(genParam)
    } else {
      res = await genVideoByText({
        ...genParam,
      })
      console.log(genParam)
    }
    if (res.data.data && res.data.code === 0) {
      generatedVideos.value = res.data.data
      progress.value = 100
      progressText.value = '生成完成！'
      message.success('教学视频生成成功！')
      progressStatus.value = 'success'
    }
    // 模拟生成的视频数据
    // const mockVideo = {
    //   url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
    // }
    //
    // generatedVideos.value = mockVideo
  } catch (error) {
    message.error('生成失败，请重试')
    progressStatus.value = 'exception'
    console.error('Video generation error:', error)
  } finally {
    generating.value = false
    loading.value = false
  }
}

// 下载视频
const downloadVideo = async (url: string) => {
  if (isDownloading.value) {
    message.warning('正在下载中，请稍候...')
    return
  }

  try {
    isDownloading.value = true
    downloadProgress.value = 0

    // 显示下载进度提示
    const hideLoading = message.loading('正在准备下载...', 0)

    const response = await fetch(url)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }

    const contentLength = response.headers.get('content-length')
    const total = contentLength ? parseInt(contentLength, 10) : 0

    hideLoading()

    if (total > 0) {
      // 有文件大小信息，显示进度
      const reader = response.body?.getReader()
      if (!reader) throw new Error('无法读取响应流')

      const chunks = []
      let received = 0

      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        chunks.push(value)
        received += value.length
        downloadProgress.value = Math.round((received / total) * 100)
      }

      const blob = new Blob(chunks)
      const fileName = `教学视频_${new Date().toLocaleString('zh-CN').replace(/[/:]/g, '-')}.mp4`
      saveAs(blob, fileName)
    } else {
      // 没有文件大小信息，直接下载
      const blob = await response.blob()
      const fileName = `教学视频_${new Date().toLocaleString('zh-CN').replace(/[/:]/g, '-')}.mp4`
      saveAs(blob, fileName)
    }

    message.success('视频下载成功！')
  } catch (error) {
    console.error('Download error:', error)
    message.error('下载失败，请检查网络连接后重试')
  } finally {
    isDownloading.value = false
    downloadProgress.value = 0
  }
}
</script>

<style scoped>
.video-generation-container {
  padding: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: cover;
  background-blend-mode: overlay;
  height: 90vh;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.video-generation-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 255, 0.85) 100%);
  z-index: 0;
}

/* 移除复杂的旋转动画以减少卡顿 */

.section-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.95) 100%);
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 8px 32px rgba(102, 126, 234, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  margin-bottom: 28px;
  z-index: 1;
  position: relative;
  transition: box-shadow 0.2s ease;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

.section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 24px 24px 0 0;
}

.section-card:hover {
  box-shadow:
    0 8px 24px rgba(102, 126, 234, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:deep(.ant-card-head) {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%);
  border-bottom: 2px solid rgba(102, 126, 234, 0.15);
  border-radius: 24px 24px 0 0;
  position: relative;
}

:deep(.ant-card-head-title) {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

:deep(.ant-form-item-label > label) {
  font-weight: 500;
  color: #2c3e50;
}

:deep(.ant-input),
:deep(.ant-input-affix-wrapper),
:deep(.ant-select-selector) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.9) 100%);
  border: 2px solid rgba(102, 126, 234, 0.2);
  border-radius: 16px;
  box-shadow:
    0 2px 8px rgba(102, 126, 234, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: border-color 0.2s ease;
  height: 44px;
}

:deep(.ant-input:hover),
:deep(.ant-input-affix-wrapper:hover),
:deep(.ant-select-selector:hover) {
  border-color: rgba(102, 126, 234, 0.4);
}

:deep(.ant-input:focus),
:deep(.ant-input-affix-wrapper:focus),
:deep(.ant-select-focused .ant-select-selector) {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  background: rgba(255, 255, 255, 0.98);
}

:deep(.ant-textarea) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.9) 100%);
  border: 2px solid rgba(102, 126, 234, 0.2);
  border-radius: 16px;
  box-shadow:
    0 2px 8px rgba(102, 126, 234, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: border-color 0.2s ease;
}

:deep(.ant-textarea:hover) {
  border-color: rgba(102, 126, 234, 0.4);
}

:deep(.ant-textarea:focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
  background: rgba(255, 255, 255, 0.98);
}

:deep(.ant-btn-primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 16px;
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
  transition: background 0.2s ease;
}

:deep(.ant-btn-primary:hover) {
  background: linear-gradient(135deg, #5a6fd8, #6a4190);
}

:deep(.ant-btn-primary:active) {
  background: linear-gradient(135deg, #4f63d2, #5d3a84);
}

/* 上传预览样式 */
.uploaded-preview {
  margin-top: 12px;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.uploaded-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

/* 比例选择样式 */
.ratio-option {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.ratio-name {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.ratio-desc {
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

/* 风格选择样式 */
.style-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.style-preview {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
}

.style-option span {
  font-size: 14px;
  color: #333;
}

.result-section {
  padding: 28px;
  background: linear-gradient(145deg, rgba(248, 250, 255, 0.95) 0%, rgba(240, 245, 255, 0.9) 100%);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  min-height: 450px;
  z-index: 1;
  position: relative;
  box-shadow:
    0 8px 32px rgba(102, 126, 234, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.result-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #667eea 50%, transparent 100%);
  border-radius: 20px 20px 0 0;
}

.result-section:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 48px rgba(102, 126, 234, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.result-section h3 {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #2c3e50 0%, #667eea 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
  text-align: center;
  position: relative;
}

.result-section h3::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.loading-container p {
  margin-top: 16px;
  color: #666;
  font-size: 14px;
}

.progress-info {
  width: 100%;
  max-width: 400px;
  margin-top: 20px;
}

.progress-text {
  margin-top: 8px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  padding: 8px;
}

.video-item {
  position: relative;
  border-radius: 20px;
  overflow: visible;
  box-shadow:
    0 4px 16px rgba(102, 126, 234, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.95) 100%);
  border: 2px solid rgba(255, 255, 255, 0.4);
  transition: none;
  cursor: default;
}

.video-preview {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.video-preview video {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.video-preview video::-webkit-media-controls {
  z-index: 20;
}

.video-preview video::-webkit-media-controls-panel {
  z-index: 20;
}

.video-info {
  padding: 16px;
  background: rgba(255, 255, 255, 0.95);
}

.video-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.video-info p {
  margin: 4px 0;
  font-size: 14px;
  color: #666;
}

.video-actions {
  padding: 16px;
  background: linear-gradient(135deg, rgba(248, 249, 255, 0.9), rgba(240, 242, 255, 0.8));
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  gap: 8px;
}

.video-actions .ant-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  transition: none;
}

.video-actions .ant-btn:hover {
  background: linear-gradient(135deg, #5a6fd8, #6a4190);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: rgba(248, 249, 255, 0.9);
  border-radius: 12px;
  border: 2px dashed rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

/* 移除空状态的闪烁动画 */

.empty-tip {
  margin-top: 16px;
  color: #666;
  font-size: 14px;
  text-align: center;
}

/* 视频预览模态框样式 */
.video-preview-container {
  padding: 0;
}

.video-description {
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-radius: 12px;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.video-description h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.video-description p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

.video-wrapper {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.video-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
}

.video-loading p {
  margin-top: 16px;
  color: #666;
  font-size: 14px;
}

.preview-actions {
  display: flex;
  justify-content: center;
  padding: 16px 0 0 0;
  border-top: 1px solid rgba(102, 126, 234, 0.1);
}

.preview-actions .ant-btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.preview-actions .ant-btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.preview-actions .ant-btn-primary:hover {
  background: linear-gradient(135deg, #5a6fd8, #6a4190);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.preview-actions .ant-btn:not(.ant-btn-primary) {
  border-color: rgba(102, 126, 234, 0.3);
  color: #667eea;
}

.preview-actions .ant-btn:not(.ant-btn-primary):hover {
  border-color: #667eea;
  color: #5a6fd8;
  background: rgba(102, 126, 234, 0.05);
}

/* 下载进度样式优化 */
:deep(.ant-btn-loading .ant-btn-loading-icon) {
  margin-right: 8px;
}

/* 模态框样式优化 */
:deep(.ant-modal-content) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

:deep(.ant-modal-header) {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
  border-radius: 16px 16px 0 0;
}

:deep(.ant-modal-title) {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

:deep(.ant-modal-body) {
  padding: 24px;
}

/* 视频占位符样式 */
.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-radius: 8px;
  border: 2px dashed rgba(102, 126, 234, 0.3);
}

.video-placeholder p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

.share-content {
  padding: 20px 0;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .video-generation-container {
    padding: 16px;
  }

  .section-card {
    border-radius: 12px;
  }
}

@media (max-width: 768px) {
  .video-generation-container {
    padding: 12px;
  }

  .section-card {
    border-radius: 8px;
  }

  .video-preview video {
    height: 200px;
  }

  :deep(.ant-btn-primary) {
    height: 40px;
    font-size: 13px;
  }

  .ratio-option,
  .style-option {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .video-generation-container::before {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .section-card {
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  :deep(.ant-card-head-title) {
    color: #fff;
  }

  :deep(.ant-form-item-label > label) {
    color: #fff;
  }

  :deep(.ant-input),
  :deep(.ant-input-affix-wrapper),
  :deep(.ant-select-selector),
  :deep(.ant-textarea) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  .result-section {
    background: rgba(40, 40, 40, 0.9);
  }

  .result-section h3 {
    color: #fff;
  }

  .empty-state {
    background: rgba(40, 40, 40, 0.9);
    border-color: rgba(102, 126, 234, 0.5);
  }

  .uploaded-preview {
    background: rgba(255, 255, 255, 0.1);
  }

  .ratio-name,
  .style-option span {
    color: #fff;
  }

  .ratio-desc {
    color: #ccc;
  }
}
</style>
